<template>
<a-modal
    v-model="show"
    :centered="true"
    :maskClosable="false"
    width=90%
    :title="formName"
    :footer="null"
     @cancel="onClose">
     <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider style="background: #fff; border-right: 1px solid #e8e8e8">
    <!-- 历史路径 -->
      <a-timeline>
        <div>
          <a-timeline-item v-for="(flow, index) in baseRecord.flowPathHist" v-if="index === 0" :key="flow.taskId">
            <a-icon type="up-circle" slot="dot" theme="twoTone" two-tone-color="#1890ff" style="font-size: 25px;" />
            <div style="font-size:18px; font-weight: bold; margin-bottom: 10px">&nbsp;&nbsp;&nbsp;{{flow.activityName}}</div>
            到达日期：{{flow.startDate}}<br />
            到达时间：{{flow.startTime}}<br />
          </a-timeline-item>
          <a-timeline-item v-for="(flow, index) in baseRecord.flowPathHist" v-if="index !== 0" :key="flow.taskId">
            <a-icon slot="dot" type="check-circle" theme="twoTone" two-tone-color="#52c41a" style="font-size: 25px;" />
            <div style="font-size:18px; font-weight: bold; margin-bottom: 10px">&nbsp;&nbsp;&nbsp;{{flow.activityName}}</div>
            完成日期：{{flow.endDate}}<br />
            完成时间：{{flow.endTime}}<br />
            经办人：{{flow.assignee}}<br />
            批注：{{flow.comment}}<br />
          </a-timeline-item>
        </div>
        <br />
      </a-timeline>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0; display:inline">
         <!-- 批注+操作 -->
      <a-form>
        <a-row>
         <a-col :span="12">
          <a-form-item v-bind="formItemLayout">
            <a-input v-model="comment" style="margin-left: 60px" placeholder="流程批注" />
          </a-form-item>
         </a-col>
         <a-col :span="12" style="margin-top: 4px">
            <!-- 动态按钮区域 -->
            <div v-for="item in baseRecord.flowbarnchs" :key="item.flowStatus" style="display:inline">
            <a-button @click="handleSubmit(item)" type="primary" :loading="loading"  >{{item.flowName}}</a-button>
            &nbsp;
            </div>
         </a-col>
        </a-row>
      </a-form>
      </a-layout-header>
      <a-layout-content
        :style="{padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <a-divider orientation="left">任务单内容</a-divider>
         <!-- 表单区域 -->
      <fm-generate-antd-form
      :data="jsonData"
      :remote="remoteFuncs"
      :remote-option="dynamicData"
      ref="GenerateForm"
      v-if="NodeDealFormVisiable"
    >
    </fm-generate-antd-form>
     <div class="drawer-bootom-button">
        <a-popconfirm title="确定放弃？" @confirm="onClose" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">取消</a-button>
        </a-popconfirm>
      </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
  <candidate-users
    ref="CandidateUsers"
    :sequenceId="candidateUsersParams.sequenceId"
    @setCandidateUser="setCandidateUser"
    @close="handleCandidateUsersClose"
    @success="handleCandidateUsersSuccess">
  </candidate-users>
</a-modal>
</template>
<script>
import CandidateUsers from './CandidateUsers'

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}

export default {
  name: 'NodeDealForm',
  components: {CandidateUsers},
  props: {
    NodeDealFormVisiable: {
      default: false
    },
    username: {
      require: true
    }
  },
  data () {
    let reqGet = this.$get // 避免在回调函数中使用this
    return {
      // todoList中的信息
      baseRecord: {
        flowPathHist: [],
        flowbarnchs: []
      },
      candidateUsersParams: {
        sequenceId: '',
        candidateUser: ''
      },
      nodeData: {},
      formName: '',
      jsonData: {},
      remoteFuncs: {},
      dynamicData: {},
      collapsed: false,
      loading: false,
      comment: '',
      formItemLayout
    }
  },
  computed: {
    show: {
      get: function () {
        return this.NodeDealFormVisiable
      },
      set: function () {
      }
    }
  },
  methods: {
    onClose () {
      this.$emit('close')
    },
    setFormValues (data) {
      this.nodeData = data
      this.comment = ''
      this.formName = data.currNode.formTitle
      this.jsonData = JSON.parse(data.formJson)
    },
    setCandidateUser (user, sequenceId) {
      this.candidateUsersParams.candidateUser = user
      this.completeTask(sequenceId)
      this.$refs.CandidateUsers.closeModal()
    },
    handleSubmit (flow) {
      this.$get('process/candidateUsers?seqId=' + flow.flowStatus + '&taskId=' + this.nodeData.taskId).then((r) => {
        if (r.data.ifShowSetCandidateUser) {
          this.candidateUsersParams.sequenceId = flow.flowStatus
          this.$refs.CandidateUsers.setUsers(r.data.userList)
          this.$refs.CandidateUsers.showModal()
        } else {
          this.completeTask(flow.flowStatus)
        }
      })
    },
    completeTask (flowStatus) {
      this.loading = true
      this.$refs.GenerateForm.getData().then(data => {
        let formdata = JSON.stringify(data)
        this.$post('process/complete', {
          applicant: this.username,
          taskId: this.nodeData.taskId,
          procInstId: this.nodeData.procInstId,
          flowData: formdata,
          flowStatus: flowStatus,
          comment: this.comment,
          nextAssignee: this.candidateUsersParams.candidateUser}).then((res) => {
          if (res.data.status) {
            this.$emit('success')
          } else {
            this.$message.error(res.data.message)
          }
          this.loading = false
        })
      }).catch(e => {
        this.loading = false
      })
    },
    handleCandidateUsersClose () {

    },
    handleCandidateUsersSuccess () {

    }
  },
  watch: {
    NodeDealFormVisiable () {
      if (this.NodeDealFormVisiable) {
        this.$get('process/nexttodo?taskId=' + this.nodeData.taskId).then((res) => {
          this.baseRecord.flowbarnchs = res.data.data.rows
        })
        this.$get('process/hisactivities?procInstId=' + this.nodeData.procInstId + '&offSet=0&pageSize=10').then((r) => {
          this.baseRecord.flowPathHist = r.data.rows
        })
        this.$get('process/flowData?procInstId=' + this.nodeData.procInstId).then((res) => {
          this.$refs.GenerateForm.setData(JSON.parse(res.data.data.rows.flowData))
        })
      }
    }
  }
}
</script>
